<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head th:replace="userCommon::common-header">
    <style>
        /* 强制生效的样式 */
        .my-course-btn {
            transition: all 0.4s ease !important;
            border: none !important;
            border-radius: 10px !important;
            font-weight: 600 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            height: 100% !important;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
            position: relative !important;
            overflow: hidden !important;
        }

        .my-course-btn::after {
            content: '' !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: rgba(255,255,255,0.1) !important;
            transform: translateX(-100%) !important;
            transition: transform 0.3s ease !important;
        }

        /* 颜色定义 */
        .my-course-btn-purple { background: linear-gradient(135deg, #9c27b0, #673ab7) !important; }
        .my-course-btn-teal { background: linear-gradient(135deg, #009688, #4caf50) !important; }
        /* 其他颜色类... */

        /* 响应式调整 */A
        @media (max-width: 768px) {
            .my-course-btn i {
                font-size: 1.3rem !important;
            }
        }
    </style>
</head>
<body class="sb-nav-fixed">
<nav th:replace="userCommon::common-navbar"></nav>
<div id="layoutSidenav">
    <div th:replace="userCommon::common-sidenav"></div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4" th:text="${member.memberName} + '的主页'"></h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item active">主页</li>
                </ol>



                <!-- 会员状态卡片 -->

                <div class="col-md-6">
                    <div class="card status-card bg-primary text-white mb-4">
                        <div class="card-body">
                            <h5 class="card-title">会员状态</h5>
                            <p class="card-text">
                                剩余课时: <span th:text="${member.cardNextClass}"></span> 小时<br>
                                办卡时间: <span th:text="${member.cardTime}"></span>
                            </p>
                        </div>
                    </div>
                </div>


                <!-- 健康小贴士 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-heartbeat me-1"></i>
                        健康小贴士
                    </div>
                    <div class="card-body">
                        <div class="health-tip">
                            <h5>运动后注意事项</h5>
                            <p>运动后30分钟内补充蛋白质有助于肌肉恢复，记得适当拉伸放松肌肉哦！</p>
                            <a href="https://www.bilibili.com/video/BV1gf4y1p78A" target="_blank">点击查看运动后恢复指南</a>
                        </div>
                    </div>
                </div>


                <!-- 优化后的课程快速链接部分 -->
                <div class="card mb-4">
                    <div class="card-header bg-dark text-white">
                        <i class="fas fa-dumbbell me-1"></i>
                        运动指南
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <!-- 第一行 -->
                            <div class="col">
                                <a href="https://www.bilibili.com/video/BV1Ct4y1J7zV" class="btn w-100 py-3 course-btn course-btn-purple" target="_blank">
                                    <i class="fas fa-spa mb-2 d-block"></i>
                                    健美操
                                </a>
                            </div>
                            <div class="col">
                                <a href="https://www.bilibili.com/video/BV1e6gkzHERR" class="btn w-100 py-3 course-btn course-btn-teal" target="_blank">
                                    <i class="fas fa-peace mb-2 d-block"></i>
                                    瑜伽
                                </a>
                            </div>
                            <div class="col">
                                <a href="https://www.bilibili.com/video/BV1e5411W76n" class="btn w-100 py-3 course-btn course-btn-blue" target="_blank">
                                    <i class="fas fa-weight mb-2 d-block"></i>
                                    减脂
                                </a>
                            </div>
                            <div class="col">
                                <a href="https://www.bilibili.com/video/BV1AJ411S7s6" class="btn w-100 py-3 course-btn course-btn-orange" target="_blank">
                                    <i class="fas fa-bicycle mb-2 d-block"></i>
                                    动感单车
                                </a>
                            </div>
                            <div class="col">
                                <a href="https://www.bilibili.com/video/BV1L54y1Q7Qt" class="btn w-100 py-3 course-btn course-btn-red" target="_blank">
                                    <i class="fas fa-dumbbell mb-2 d-block"></i>
                                    增肌
                                </a>
                            </div>

                            <!-- 第二行 -->
                            <div class="col">
                                <a href="https://www.bilibili.com/video/BV1Xk4y1x7ik" class="btn w-100 py-3 course-btn course-btn-indigo" target="_blank">
                                    <i class="fas fa-child mb-2 d-block"></i>
                                    塑形
                                </a>
                            </div>
                            <div class="col">
                                <a href="https://www.bilibili.com/video/BV1Xk4y1x7ik" class="btn w-100 py-3 course-btn course-btn-green" target="_blank">
                                    <i class="fas fa-weight-hanging mb-2 d-block"></i>
                                    杠铃操
                                </a>
                            </div>
                            <div class="col">
                                <a href="https://www.bilibili.com/video/BV1dP4y187BY" class="btn w-100 py-3 course-btn course-btn-pink" target="_blank">
                                    <i class="fas fa-medkit mb-2 d-block"></i>
                                    运动康复
                                </a>
                            </div>
                            <div class="col">
                                <a href="https://www.bilibili.com/video/BV1mJ4m1L7Ms" class="btn w-100 py-3 course-btn course-btn-cyan" target="_blank">
                                    <i class="fas fa-user-ninja mb-2 d-block"></i>
                                    综合格斗
                                </a>
                            </div>
                            <div class="col">
                                <a href="https://www.bilibili.com/video/BV1Wm4y1U72s" class="btn w-100 py-3 course-btn course-btn-yellow" target="_blank">
                                    <i class="fas fa-hands-helping mb-2 d-block"></i>
                                    普拉提
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        </br></br></br></br>
        <footer th:replace="userCommon::common-footer"></footer>
    </div>
</div>

<div th:include="userCommon::common-scripts"></div>

<!-- 倒计时脚本 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 解析中文日期格式为Date对象
        function parseChineseDate(dateStr) {
            // 示例格式："2025年7月20日 15:00"
            const regex = /(\d{4})年(\d{1,2})月(\d{1,2})日 (\d{1,2}):(\d{2})/;
            const match = dateStr.match(regex);

            if (!match) {
                console.error('日期格式不匹配:', dateStr);
                return null;
            }

            const year = parseInt(match[1]);
            const month = parseInt(match[2]) - 1; // 月份0-11
            const day = parseInt(match[3]);
            const hour = parseInt(match[4]);
            const minute = parseInt(match[5]);

            return new Date(year, month, day, hour, minute);
        }

        // 更新所有倒计时
        function updateCountdowns() {
            const countdownElements = document.querySelectorAll('.countdown');

            countdownElements.forEach(element => {
                const classTimeStr = element.getAttribute('data-time');
                const classTime = parseChineseDate(classTimeStr);
                const now = new Date();

                if (!classTime) {
                    element.textContent = '时间格式错误';
                    return;
                }

                if (isNaN(classTime.getTime())) {
                    element.textContent = '无效的时间';
                    return;
                }

                if (classTime < now) {
                    element.textContent = '课程已开始或结束';
                    return;
                }

                const diff = classTime - now;
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                let countdownText = '';
                if (days > 0) {
                    countdownText = `${days}天${hours}小时后开始`;
                } else if (hours > 0) {
                    countdownText = `${hours}小时${minutes}分钟后开始`;
                } else {
                    countdownText = `${minutes}分钟${seconds}秒后开始`;
                }

                element.textContent = countdownText;
            });
        }

        // 初始更新
        updateCountdowns();

        // 每秒更新一次
        setInterval(updateCountdowns, 1000);
    });
</script>

</body>
</html>